<span>test</span>
<dx-tree-list #tree [dataSource]="dataSources" 
    itemsExpr="childs"
    keyExpr="id"
    parentIdExpr="parentId"
    [showRowLines]="true" 
    [allowColumnReordering]="true"
    [allowColumnResizing]="true"
 
    [columnAutoWidth]="true"
    [columnFixing]="{enabled:true}"
    dataStructure="plain"
    dateSerializationFormat="yyyy-MM-dd"
    [headerFilter]="{visible:true}"
 
    height="300px"
    hint="Tree List Demo"
    [hoverStateEnabled]="true"
    [loadPanel]="{enabled:true}"
    >
    <dxo-state-storing [enabled]="true" type="localStorage" storageKey="treeListStorage"></dxo-state-storing>

    <!-- <dxi-column *ngFor="let col of treeListColumns" [caption]="col.caption" [dataField]="col.dataField"></dxi-column> -->
    <dxi-column caption="id" dataField="id" cellTemplate="cellTemplate"></dxi-column>
    <dxi-column caption="parentId" dataField="parentId"></dxi-column>
    <dxi-column caption="节点类型" dataField="nodeType"></dxi-column>
    <dxi-column caption="产品ID" dataField="productId"></dxi-column>
    <dxi-column caption="交易场所" dataField="exchange"></dxi-column>

    <div *dxTemplate="let cell of 'cellTemplate'">
        <ng-container *ngIf="cell.data | toBool; else thenDataTemplate">
            <button class="category-row" [ngStyle]="{ 'background-color':cell.data.backgroudColor,'color':cell.data.color }">{{cell.data.name}}</button>
        </ng-container>
        <ng-template #thenDataTemplate>
            {{cell.data.nodeType === 1 ? cell.value : ''}}
        </ng-template>
    </div>

</dx-tree-list>